<template>
  <div>
    <el-table :data="tableData" style="width: 100%;" height="500">
      <el-table-column v-for="title in tableTitles"
          :label="title.label"
          :width="title.width">
          <el-image v-if="title.type == 'image'" slot-scope="scope"
                  style="width: 150px; height: 100px"
                  :src="'http://localhost:8000/file/getImg?path=' + JSON.parse(scope.row[title.prop])[0]"
                  fit="cover"/>
          <!-- <span v-if="title.type == 'image'" slot-scope="scope">{{'http://localhost:8000/file/getImg?path=' + JSON.parse(scope.row[title.prop])[0]}}</span> -->
          <span v-else slot-scope="scope">{{scope.row[title.prop]}}</span>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
                  <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                  <el-button type="text" size="small">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;">
      <!-- 分页导航 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableTitles: {
      type: Array
    },
    url: {
      type: String
    },
    pEdit: {
      type: Function
    }
  },
  data(){
    return {
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        pageTotal: 0
    }
  },
  methods: {
    edit(rowInfo){
      this.pEdit(rowInfo);
    },
    handleCurrentChange(val) {
      //重新跳转
      this.pageNum = val;
      this.goPage();
    },
    goPage(){
      var vt = this;
      //主动请求服务的城市列表
      this.utils.myajax({
        type: "GET",
        url: this.url,
        data: {
          // pageNum: this.pageNum,
          // pageSize: this.pageSize
        },
        success: function(data, page){
          vt.tableData = data;
          vt.pageNum = page.pageNum;
          vt.pageSize = page.pageSize;
          vt.pageTotal = page.count;
        }
      });
    }
  },
  mounted(){
    //发送ajax请求
    this.goPage();
  }
}
</script>

<style>
</style>
